<!--高拍仪扫描附件的组件-->

<template>
  <div class="main-content">
    <div class="content-view" v-loading="cameraLoading">
      <template v-if="GPYDriveObj.isOpen && taskTempImgBase64">
        <img :src="taskTempImgBase64" />
      </template>
    </div>
    <el-scrollbar style="width: 100%" :key="imgArray.length + 'viewimg'">
      <div class="view-img">
        <div
          class="img-div"
          v-for="(base64Data, index) in imgArray"
          :key="index"
        >
          <span class="el-icon-error" @click="delImg(index)"></span>
          <img :src="base64Data" />
        </div>
      </div>
    </el-scrollbar>
    <div class="option-buts">
      <!-- el-icon-camera-solid -->
      <el-button
        size="mini"
        type="danger"
        @click="tiggerCamera"
        :icon="
          GPYDriveObj.isOpen ? 'el-icon-video-pause' : 'el-icon-video-play'
        "
        >{{ GPYDriveObj.isOpen ? "关闭摄像头" : "打开摄像头" }}</el-button
      >
      <el-button
        size="mini"
        type="success"
        icon="el-icon-sort"
        :disabled="!GPYDriveObj.isOpen"
        @click="tiggerCameraType"
        >切换摄像头</el-button
      >
      <el-button
        size="mini"
        type="success"
        icon="el-icon-full-screen"
        :disabled="!GPYDriveObj.isOpen"
        @click="getHighPicture"
        :loading="getCameraing"
        >拍照</el-button
      >
    </div>
    <div class="footer-buts">
      <el-button type="primary" @click="saveImg">确定</el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </div>
  </div>
</template>

<script>
import GPYDrive from "@/api/kstb/common/hardwareDrive.js";
export default {
  data() {
    return {
      GPYDriveObj: GPYDrive,
      cameraLoading: false,
      getCameraing: false,
      //摄像头任务对象
      taskCamera: null,
      taskTempImgBase64: "",
      //拍照好的照片数组
      imgArray: [],
    };
  },
  async created() {
    //页面加载的时候打开摄像头
    this.cameraLoading = true;
    await this.initOpenHighCamera();
    this.cameraLoading = false;
  },

  async beforeDestroy() {
    if (GPYDrive.isOpen) {
      await GPYDrive.closeHighCamera();
    }
    if (this.taskCamera) {
      clearInterval(this.taskCamera);
    }
    console.log("销毁。。。beforeDestroy");
  },

  destroyed() {
    console.log("销毁。。。");
  },

  methods: {
    //初始化打开摄像头
    async initOpenHighCamera() {
      const res = await GPYDrive.openHighCamera();
      if (!res || res.code !== 200) {
        this.msgError("高拍仪摄像头连接失败！");
      }
      //启动任务
      this.startCameraTask();
    },

    startCameraTask() {
      const that = this;
      //开始预览拍照任务，模拟摄像持续 200 ms执行一次
      this.taskCamera = setInterval(async () => {
        let res = null;

        if (GPYDrive.isOpen) {
          if (GPYDrive.singleOpenType === "face") {
            res = await GPYDrive.getFacePicture();
          }

          if (GPYDrive.singleOpenType === "high") {
            res = await GPYDrive.getHighPicture();
          }
        }

        if (res && res.code === 200) {
          if (res.data && res.data !== "undefined") {
            that.taskTempImgBase64 = `data:image/jpeg;base64,${res.data}`;
          }

          this.$forceUpdate();
        }
      }, 200);
    },

    //切换摄像头
    async tiggerCameraType() {
      this.cameraLoading = true;

      if (this.taskCamera) {
        clearInterval(this.taskCamera);
      }

      if (GPYDrive.singleOpenType === "face") {
        //关闭face，打开high
        await GPYDrive.closeFaceCamera();
        await GPYDrive.openHighCamera();
      } else if (GPYDrive.singleOpenType === "high") {
        await GPYDrive.closeHighCamera();
        await GPYDrive.openFaceCamera();
      }
      this.startCameraTask();
      this.cameraLoading = false;
    },

    //点击拍照的操作
    async getHighPicture() {
      if (this.imgArray.length >= 5) {
        this.msgError("最多上传5张图片");
        return false;
      }
      this.getCameraing = true;
      if (GPYDrive.isOpen) {
        let res = null;

        if (GPYDrive.isOpen) {
          if (GPYDrive.singleOpenType === "face") {
            res = await GPYDrive.getFacePicture();
          }

          if (GPYDrive.singleOpenType === "high") {
            res = await GPYDrive.getHighPicture();
          }
        }

        if (res && res.code === 200) {
          this.imgArray.push(`data:image/jpeg;base64,${res.data}`);
        }
      }
      this.getCameraing = false;
    },

    //切换摄像头的开启关闭
    async tiggerCamera() {
      if (GPYDrive.isOpen) {
        this.taskTempImgBase64 = null;
        if (this.taskCamera) {
          clearInterval(this.taskCamera);
        }
        await GPYDrive.closeHighCamera();
      } else {
        await GPYDrive.openHighCamera();
        this.startCameraTask();
      }
    },
    delImg(idx) {
      console.log("删除", idx);
      this.imgArray.splice(idx, 1);
    },
    saveImg() {
      if (this.imgArray.length === 0) {
        this.msgError("请拍摄一张照片!");
        return false;
      }

      console.log(this.imgArray);
      this.$emit("saveImgSuccess", this.imgArray);
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang="less" scoped>
.main-content {
  .content-view {
    width: 100%;
    height: 360px;
    border: 1px #ddd solid;
    border-radius: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .view-img {
    margin: 20px 0;
    display: inline-flex;
    .img-div {
      display: flex;
      margin-right: 10px;
      position: relative;
      img {
        width: 150px;
        height: 100px;
        border-radius: 5px;
      }
      .el-icon-error {
        font-size: 21px;
        color: red;
        width: 21px;
        height: 21px;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
      }
    }
  }
  .option-buts {
    text-align: center;
    margin: 20px;
  }
  .footer-buts {
    text-align: center;
    margin-top: 50px;
  }
}
</style>


